<template>
    <div class="pay">
        <div class="erWeima" v-loading=loadingFlag>
            <img :src=imgSrc alt="">
            <div>使用微信进行支付</div>
        </div>
        <el-descriptions title="订单详情">
            <el-descriptions-item label="订单号">{{order_id}}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{create_time}}</el-descriptions-item>
            <el-descriptions-item label="产品名称">{{productName}}</el-descriptions-item>
            <el-descriptions-item label="商品描述">{{description}}</el-descriptions-item >
            <el-descriptions-item label="购买数量">{{quantity}}</el-descriptions-item >
            <el-descriptions-item label="购买用户">{{user_nickname}}</el-descriptions-item >
            <el-descriptions-item label="手机号">{{user_phone}}</el-descriptions-item >
            <el-descriptions-item label="总价格" style="color:red;">{{total_fee}}</el-descriptions-item >
            
        </el-descriptions>
    </div>
</template>

<script>
    import * as api from '@/api/pay'
    import qrcode from 'qrcode'
    export default {
        meta:{
            name:'支付'
        },
        data(){
            return{
                order_id:'',
                imgSrc:'',
                loadingFlag:true,
                create_time:'',
                productName:'',
                description:'',
                quantity:'',
                user_nickname:'',
                user_phone:'',
                total_fee:''
            }
        },
        mounted(){
            //! this.order_id = this.$route.query  为啥刷新不会弹出交易取消框
            let { order_id } = this.$route.query
            this.order_id = order_id

            if(!this.order_id){
                console.log('11');
                ////没有订单id  有可能用户刷新了页面，
                ////提示 ： 本次交易取消， 并且退回上一个界面
                this.$alert('本次交易取消，请重新提交','提示',{
                    confirmButtonText:'确定',
                    callback:(action)=>{
                        this.$router.push({path:'/preorder'})
                    }
                })
            }

            //// 1.根据订单id 请求订单详情
            //// 2.根据订单id 获取微信支付地址,=>我们获取地址之后,生成二维码
            //// 并发请求 一次发送多个请求 Promise.all([promise1,promise2])
            Promise.all([api.getAllorder(order_id),api.startPay(order_id)])
            .then(res=>{
                console.log(res);
                let res1 = res[0].data.data
                let res2 = res[0].data.data.orderDetail[0]
                if(res[0].data.state){
                    this.create_time = res1.create_time
                    this.productName = res2.productName
                    this.description = res2.description
                    this.quantity = res2.quantity
                    this.user_nickname = res1.user_nickname
                    this.user_phone = res1.user_phone
                    this.total_fee = res1.total_fee
                }

                let {code_url , state} = res[1].data
                //!  通过qr插件转码
                if(state){
                    qrcode.toDataURL(code_url,(err,img)=>{
                        if(err){
                            throw err
                        }
                        ////关闭 等待转圈
                        this.loadingFlag = false
                        ////渲染 支付二维码
                        this.imgSrc = img
                    })

                }
            })


            ////轮询  查询支付状态
            this.queryPayStaatus = setInterval(()=>{
                api.findPayResult(this.order_id)
                .then(res=>{
                    // console.log('111',res);
                    if(res.data.state){
                        ////跳转成功支付页面
                        this.$router.push({name:'"home-payment-paysuccess"'})
                    }
                    if(res.data.status === '3004'){
                        ////交易关闭  跳转商品选择
                        this.$router.push({path:'vipmanager/charge'})
                    }
                })
            },1000)
        },
        beforeDestroy(){
            clearInterval(this.queryPayStaatus)
        }   
    }

</script>






<style>
    .erWeima{
        text-align: center;
    }
</style>